<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>My React from Scratch</title>
    <script src="./index.js"></script>
</head>

<body>
    <script>
        const component2 = () => {
            const [modelValue, setModelVaue] = useState("initvalue")
            return (
                h("div", {
                    style: `background: #f0f0f0;`,
                },
                    h("h1", null, "Hello, World!"),
                    h("div", null,
                        h("input", {
                            value: modelValue,
                            oninput: (e) => setModelVaue(e.target.value)
                        }),
                    ),
                    h("div", {
                        style:`
                        display: flex;
                        align-items: center;
                        justify-content: center;
                        `
                    },
                        h("label", {
                            style:`margin-right: 10px;`
                        }, "input value:"),
                        h("p", null, modelValue)
                    )
                )
            )
        };
        const MyComponent = (function () {
            const [count, setCount] = useState(0);

            function increment() {
                setCount(count + 1);
            }

            function decrement() {
                setCount(count - 1);
            }

            return h(
                "div",
                { className: "my-component" },
                h(
                    "div",
                    { className: "container" },
                    h("p", { className: "message" }, `Count: ${count}`),
                    h(
                        "div",
                        { className: "buttons" },
                        h("button", { onclick: () => increment() }, "Increment"),
                        h("button", { onclick: () => decrement() }, "Decrease"),
                    ),
                ),
                component2
            );
        });


        // Create an initial root element
        const root = document.createElement("div");
        root.id = "root";
        document.body.appendChild(root);

        // Initialize App
        const App = createComponent(MyComponent)();
        App.render();

        // Add CSS styling scoped to the component
        const style = document.createElement("style");
        style.textContent = `
          .my-component {
            font-family: Arial, sans-serif;
            text-align: center;
            padding: 50px;
            background: #f0f0f0;
          }
          .my-component .container {
            background: white;
            padding: 20px;
            border-radius: 10px;
            box-shadow: 0 0 10px rgba(0,0,0,0.1);
          }
          .my-component .message {
            font-size: 24px;
            margin-bottom: 20px;
          }
          .my-component .buttons button {
            font-size: 16px;
            padding: 10px 20px;
            margin: 5px;
            cursor: pointer;
            border: none;
            border-radius: 5px;
            transition: background 0.3s;
          }
          .my-component .buttons button:hover {
            background: #ddd;
          }
          .my-component .buttons button:active {
            background: #ccc;
          }
        `;

        document.head.appendChild(style);
    </script>
</body>

</html>